<template>
  <div class="user-table">
    <el-button type="primary" size="small" @click="handleAddUser">新增用户</el-button>
    <div class="table-wrapper">
      <el-table :data="data" style="width: 100%;">
        <el-table-column label="姓名" prop="name"></el-table-column>
        <el-table-column label="电话" prop="name"></el-table-column>
        <el-table-column label="余额" prop="name"></el-table-column>
        <el-table-column label="地址" prop="name"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small">充值</el-button>
            <el-button type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page-wrapper">
      <el-pagination small background @current-change="handleCurrentChange" layout="prev, pager, next" :page-size="pagination.pageSize" :current-page.sync="pagination.currentPage"></el-pagination>
    </div>
    <add-user-dialog :visible.sync="visible"></add-user-dialog>
  </div>
</template>

<script>
import AddUserDialog from './AddUserDialog';

export default {
  components: {
    AddUserDialog
  },
  data() {
    return {
      data: [],
      pagination: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      visible: false
    };
  },
  methods: {
    // 翻页
    handleCurrentChange(current) {},
    handleAddUser() {
      this.visible = true;
    }
  }
};
</script>

<style>

</style>
